<template>
   <view>
      <u-navbar title="创建考试" autoBack fixed placeholder></u-navbar>
      <view class="content">
         <u-form labelWidth="90" labelAlign="right" style="background-color: #fff;margin-top: 5px;" :model="form">
            <u-form-item label="课程名称：" prop="name">
               <u-input v-model="form.name" placeholder="课程名称" disabled suffixIcon="arrow-right" disabledColor="#fff"
                  @click="selectCourse"></u-input>
            </u-form-item>
            <u-form-item label="考试时间：" prop="start">
               <view style="padding: 0 9px;display: flex;flex: 1;" @click="start = true">
                  <text style="flex: 1;font-size: 15px;"
                  :style="{color: hasStart ? '#000' : '#c0c4cc'}">{{form.start}}</text>
                  <u-icon name="arrow-right" :size="18"></u-icon>
               </view>
            </u-form-item>
            <u-form-item label=" " prop="end">
               <view style="padding: 0 9px;display: flex;flex: 1;" @click="end = true">
                  <text style="flex: 1;font-size: 15px;"
                  :style="{color: hasEnd ? '#000' : '#c0c4cc'}">{{form.end}}</text>
                  <u-icon name="arrow-right" :size="18"></u-icon>
               </view>
            </u-form-item>
         </u-form>
         <u-datetime-picker :show="start"  mode="date" :minDate="new Date().getTime()" title="选择考试时间" 
            :formatter="formatter" @confirm="dataChange" @cancel="start = false"></u-datetime-picker>
         <u-picker :show="end" :columns="columns" @confirm="timeChange" @cancel="end = false"></u-picker>
         
         <view class="clazz" v-for="(clazz, i) in classes" :key="clazz.id">
            <!-- <u-form :model="clazzForm[`form${i}`]" labelWidth="90" labelAlign="right">
               <u-form-item prop="clazz" label="考试班级：">
                  <text>{{clazzForm[`form${i}`].clazz}}</text>
               </u-form-item>
               <u-form-item prop="room" label="考试教室：">
                  <u-input disabled disabledColor="#fff" suffixIcon="arrow-right" v-model="clazzForm[`form${i}`].room" @click="selectRoom()"></u-input>
               </u-form-item>
            </u-form> -->
         </view>
      </view>
   </view>
</template>

<script>
   import {
      getList
   } from '@/api/notice.js'
   import moment from '@/common/moment.js'
   export default {
      data() {
         return {
            form: {
               name: '',
               classes: '',
               start: '考试时间',
               end: '考试时间'
            },
            start: false,
            end: false,
            hasStart: false,
            hasEnd: false,
            columns: [['第一二节', '第三四节', '第五六节', '第七八节', '第九十节']],
            classes: [],
            clazzForm: {}
         }
      },
      created() {
         getList().then(res => {
            console.log(res);
         })
         uni.$on('selectCourse', data => {
            this.classes = data.item.classes
            this.form.name = data.item.course
            this.classes.forEach((item, i) => {
               this.$set(this.clazzForm, `form${i}`, {})
               this.$set(this.clazzForm[`form${i}`], 'clazz', item.name)
               this.$set(this.clazzForm[`form${i}`], 'room', '')
            })
         })
      },
      methods: {
         formatter(type, value) {
            if(type == 'year') {
               return `${value}年`
            }else if(type == 'month') {
               return `${value}月`
            }else if(type == 'day') {
               return `${value}日`
            }
            return value
         },
         selectCourse() {
           uni.navigateTo({
              url: '/pages/menus/exam/arrange/courselist'
           }) 
         },
         dataChange({value}) {
            this.form.start = moment(new Date(value)).format('YYYY-MM-DD')
            this.start = false
            this.hasStart = true
         },
         timeChange({value}) {
            this.form.end = value[0]
            this.end = false
            this.hasEnd = true
         },
         selectRoom() {
            uni.navigateTo({
               url: `/pages/menus/exam/arrange/room?start=${this.form.start}&end=${this.form.end}`
            })
         }
      }
   }
</script>

<style lang="scss" scoped>
   .content {
      
      .clazz {
         margin: 10px 0;
         background-color: #fff;
      }
   }
</style>
